<template>
	<view @touchmove.stop.prevent="">
		<u-navbar title-color="#717171" :background="{ backgroundColor: '#ffffff' }" :back-text-style="{color: '#fff'}"
		 :title="$t('pressrelease.EditInformation')">
			<view class="navbar-right" slot="right">
				<view class="message-box right-item">
					<button v-if="choiceVideo" @click="nextStep" style="background-color: #ed4141;color: #fff;margin-right: 20rpx;"
					 size="mini">{{$t('pressrelease.nextStep')}}</button>
				</view>
			</view>
		</u-navbar>
		<view class="small-content">
			<video :enable-play-gesture="true" :autoplay="true" :src="videoSrc.tempFilePath" controls></video>
			<view v-if="choiceVideo" style="padding: 20rpx;">
				<!-- 旋转角度 -->
				<view class="sma-rotatin">
					<text>{{$t('pressrelease.Rotation')}}</text>
					<u-radio-group v-model="rotation" @change="radioGroupChange">
						<u-radio v-for="(item, index) in rotationlist" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<u-button @click="jumpMusic" size="mini" type="warn">{{$t('pressrelease.chmusic')}}</u-button>
				</view>
				<!-- 音乐 -->
				<view v-show="current.singer" class="sma-muic">
					<audio style="text-align: left;" :src="'https://music-asean.oss-cn-hongkong.aliyuncs.com'+current.music_file"
					 :poster="'https://music-asean.oss-cn-hongkong.aliyuncs.com'+current.cover" :name="current.title" :author="current.singer"
					 @timeupdate="timeupdate" controls></audio>
					<view class="musc-BUM">
						<text>{{$t('pressrelease.BGMstarts')}}{{bgmStart}}{{$t('pressrelease.ssss')}}</text><text>{{$t('pressrelease.theOriginal')}}</text>
						<u-switch v-model="removeOST"></u-switch>
					</view>
				</view>
				<!-- 音量 -->
				<view v-show="current.singer" class="sma-rotatin">
					<text>{{$t('pressrelease.BGMvolume')}}</text>
					<u-radio-group v-model="volume" @change="radioGroupChange">
						<u-radio v-for="(item, index) in volumelist" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}{{$t('pressrelease.times')}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<!-- <u-button  @click="test" type="success" shape="circle">重新选择</u-button> -->
			<view v-if="!choiceVideo" class="edit-content">
				<view class="edit-info" @click="toggleMask('show',0)">
					<view class="title">{{$t('pressrelease.title')}}</view>
					<input disabled type="text" :value="title" :placeholder="$t('pressrelease.Makeattractive')" />
					<u-icon class="icon" name="arrow-right" color="#b9b9b9" size="28"></u-icon>
				</view>
				<u-divider half-width="47%" :use-slot="false" color="#e2e2e2"></u-divider>
				<view class="edit-info" @click="toggleMask('show',1)">
					<view class="title">{{$t('video.details.abstract')}}</view>
					<input disabled type="text" :value="abstract" :placeholder="$t('pressrelease.briefly')"  />
					<u-icon class="icon" name="arrow-right" color="#cecece" size="28"></u-icon>
				</view>
				<view class="shorvi-up">
					<!-- 上传封面 -->
					<view class="upload">
						<u-upload :max-size="5 * 1024 * 1024" :upload-text="$t('pressrelease.videoCover')" max-count="1" :auto-upload="false"
						 @on-choose-complete="completedata"></u-upload>
					</view>
					<!-- 是否原创 -->
					<view class="sma-rotatin">
						<text>{{$t('pressrelease.original')}}</text>
						<u-radio-group v-model="original" @change="radioGroupChange">
							<u-radio shape="circle" v-for="(item, index) in originallist" :key="index" :name="item.value" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<u-field v-show="original==0" v-model="copyfrom" :label="$t('pressrelease.Sourcemedia')" :placeholder="$t('pressrelease.Pleasemedia')">
				</u-field>
				<ygc-comment ref="ygcComment" :placeholder="$t('pressrelease.content')" @pubComment="pubComment"></ygc-comment>
				<view class="edit-buttou">
					<button @click="submit" class="fbButtou" type="warn">{{$t('pressrelease.release')}}</button>
				</view>

			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	export default {
		data() {
			return {
				context: null,
				togglexz: 0, // 标题/摘要
				videoSrc: '', //视频地址
				imgList: '', //图片
				choiceVideo: true,
				title: '', //标题
				abstract: '', //摘要
				volumelist: [{
						name: 0.5,
						disabled: false
					},
					{
						name: 1,
						disabled: false
					},
					{
						name: 1.5,
						disabled: false
					},
					{
						name: 2,
						disabled: false
					},
					/* {
						name: 2.5,
						disabled: false
					}, */
					/* {
						name: 3,
						disabled: false
					} */
				],
				rotationlist: [{
						name: 0,
						disabled: false
					},
					{
						name: 90,
						disabled: false
					},
					{
						name: 180,
						disabled: false
					},
					{
						name: 270,
						disabled: false
					},
				],
				originallist: [{
						name: '是',
						value: 1,
						disabled: false
					},
					{
						name: '否',
						value: 0,
						disabled: false
					},
				],
				original: 1, //是否原创
				copyfrom: '', //来源媒体
				removeOST: false, //是否去除原声
				bgmStart: 0, //BGM开始时间
				rotation: 0, //旋转角度 可选角度：0 90 180 270 360
				volume: 0, //背景音乐音量，0.5为0.5倍音量，1为一倍音量，2.5为2.5倍音量…
				current: {}, //音频文件
			};
		},
		components: {
			ygcComment
		},
		onLoad() {
			this.test()
			uni.removeStorageSync("chmusicid");
			if(this.$i18n.locale=='en'){
				this.originallist[0].name='Yes'
			this.originallist[1].name='No'
			}
			
		},
		onShow() {
			//获取音乐
			if (uni.getStorageSync("chmusicid")) {
				let urlMUSY = '/category/get-music/' + uni.getStorageSync("chmusicid")
				this.$myRequest({
					url: urlMUSY,
					header: {},
					data: {}
				}).then(res => {
					this.current = res.data
				})
			}
		},
		methods: {
			//发布
			async submit() {
				uni.showLoading();
				let data = {}
				let formData=[]
				let URL_sil={
					name:'video',
					uri:this.videoSrc.tempFilePath
				}
				if(this.imgList.uri){
					formData.push(this.imgList)
					data.frame = -1
				}else{
					data.frame = 1
				}
				if(this.original==0){
					data.copy_from=this.copyfrom
				}
				formData.push(URL_sil)
				data.is_original = this.original
				data.title = this.title
				data.abstracts = this.abstract
				data.bgmStart = this.bgmStart
				data.duration = Math.ceil(this.videoSrc.duration)
				uni.getStorageSync("chmusicid")?data.musicId=uni.getStorageSync("chmusicid"):data.musicId=-1
				this.removeOST?data.removeOST=1:data.removeOST=0
				data.rotation = this.rotation
				data.volume = this.volume
				console.log(data)
				console.log(formData)
				const res = await this.$myUploadFile({
					url: '/dmh/add-video-news',
					header: {},
					formData: data,
					files: formData
				}) 
				console.log(res)
				if (res.code == 200) {
					this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].pressrelease.successfully,
						type: 'success'
					})
					uni.hideLoading();
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1000)
			
				} else {
					this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].pressrelease.failed,
						type: 'error'
					})
				}
			},
			//监听音乐时间
			timeupdate(e) {
				this.bgmStart = Math.floor(e.detail.currentTime)
			},
			//跳转音乐界面
			jumpMusic() {
				uni.navigateTo({
					url: `/pages/choosemusic/choosemusic`
				});
			},
			//监听旋转角度
			radioGroupChange(e) {
				console.log(e)
			},
			//监听图片列表
			completedata(e) {
				var ss = {}
				const users = e.map(item => (ss.uri = item.url, ss.name = 'cover', ss));
				this.imgList = users[0]
			},
			toggleMask(type, xz) {
				this.togglexz = xz
				this.$refs.ygcComment.content = '';
				this.$refs.ygcComment.toggleMask(type);
			},
			pubComment(commentContent1) {
				this.$refs.ygcComment.toggleMask();

				if (this.togglexz == 0) {
					this.title = commentContent1;
				} else {
					this.abstract = commentContent1;
				}
				this.$refs.ygcComment.content = '';
			},
			//调用手机摄像头
			test() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					//sourceType: ['album'],
					sourceType: [ 'camera'],
					maxDuration: '45',
					complete: function(comp) {
						if (comp.tempFilePath == '') {
							uni.navigateBack()
						} else {
							self.videoSrc = comp;
						}
					},
				});
			},
			//下一步
			nextStep() {
				if (this.videoSrc == '') {
					this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].pressrelease.selectvideofile,
						type: 'error',
					})
				} else {
					this.choiceVideo = false
				}

			}
		}
	}
</script>

<style lang="scss">
	/* 上传 原创 */
	.shorvi-up {
		display: flex;
		align-items: center;
		margin: 20rpx;
		.upload {
			flex: 1;
			
		}

		.sma-rotatin {
			flex: 3
		}
	}

	/* BGM */
	.musc-BUM {
		margin-top: 20rpx;
		font-size: 35rpx;

		text {
			margin: 20rpx 30rpx 20rpx 0;
		}
	}

	/* 角度 */
	.sma-rotatin {
		text {
			margin: 0 20rpx;
			font-size: 35rpx;
		}
	}

	.sma-muic {
		margin-bottom: 30rpx;
	}

	.small-content {
		video {
			width: 100%;
		}

		button {
			width: 80%;
			margin: 50rpx auto;
		}
	}

	.edit-content {
		padding: 20rpx;
		.edit-info {
			display: flex;
			justify-content: space-between;
			padding: 25rpx 20rpx;
			color: #b9b9b9;
			font-size: 25rpx;
			line-height: 35rpx;

			.title {
				color: #9a9a9a;
				font-size: 35rpx;
			}

			input {
				width: 80%;
				text-align: right;
				font-size: 25rpx;
				color: #5f5f5f;
			}

			.icon {
				margin-left: 10rpx;
				color: #b9b9b9;
			}
		}

		.edit-buttou {
			position: absolute;
			bottom: 5%;
			width: 100%;
			display: flex;

			button {
				margin: 20rpx;
			}

			.cwButtou {
				flex: 2;
			}

			.fbButtou {
				flex: 3;
			}
		}
	}
</style>
